<template>
	<view class="all">
		<!-- logo -->
		<view class="logo">
			<image class="logo-image" src="../../static/login-register/logo_fs.png" mode="aspectFit"></image>
			<text class="logo-title">环九科技（厦门）有限公司</text>
		</view>

		<view class="form">
			<view class="form-view">
				<view class="form-item" style="position: relative;">
					<text>登录类别：</text>
					<input style="width: 138px;" @click="loginType=true" type="text" v-model="form.loginType" disabled/>
					<!-- 弹框 -->
					<view class="typeDownBox" v-show="loginType">
						<view class="typeDownBox-item" v-for="(item,index) in loginTypeList" @click="form.loginType=item.name,loginType=false,typeIndex=index">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="form-item">
					<text>账号：</text>
					<input :disabled='loginType&&areaType?true:false' type="text" v-model="form&&form.username" />
				</view>
				<view class="form-item">
					<text>密码：</text>
					<input type="text" v-model="form&&form.password" />
				</view>
				<view class="form-item form-item-area" style="position: relative;">
					<text>厂区/服务器：</text>
					<input style="width: 138px;" @click="areaType=true" type="text" v-model="form.area" disabled/>
					<!-- 弹框 -->
					<view class="typeDownBox" v-show="areaType">
						<view class="typeDownBox-item" v-for="(item,index) in area" @click="form.area=item.name,areaType=false,factoryAreaIndex=index">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<!-- 登入 -->
			<view class="btn" @click="toIndex">
				<image src="../../static/login-register/BUTTON_DR.png" mode="aspectFit"></image>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginType: false,
				areaType:false,
				form: {
					loginType: "",
					username: "",
					password: "",
					area: "",
				},
				loginTypeList: [],
				area: [],
				typeIndex:-1,
				factoryAreaIndex:-1
				
			}
		},
		async onLoad() {
			/* 查询登录类别 */
			const res = await this.$u.api.selectType({
				type: '1'
			})
			if (!res.success) {
				this.$u.toast(res.msg)
			}
			this.loginTypeList = res.body.data

			/* 查询厂区 */
			const res2 = await this.$u.api.selectType({
				type: '2'
			})
			if (!res2.success) {
				this.$u.toast(res.msg)
			}
			this.area = res2.body.data
			console.log(this.area);

		},
		methods: {
			/* 登录 */
			async toIndex() {
				const params = {
					loginType:this.loginTypeList[this.typeIndex].id,
					account: this.form.username,
					pwd: this.form.password,
					factoryArea:this.area[this.factoryAreaIndex].id
				}
				const res = await this.$u.api.login(params)
				console.log(res);
				if (res.success) {
					this.form = {
							loginType: "",
							username: "",
							password: "",
							area: ""
						},
						uni.navigateTo({
							url: `../index/index?id='1'`
						})
				} else {
					this.$u.toast(res.msg)
				}
			
			}
		}
	}
</script>

<style>
	page {
		background-color: #2169D3;
		overflow: hidden;
	}
	
	.start{
		position: absolute;
		width: 100%;
		z-index: 999;
	}

	.all {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.logo {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.logo-title {
		font-size: 20px;
		font-weight: 700;
	}

	.logo-image {
		width: 150px;
	}

	.form {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 80px;
		font-size: 20px;
	}


	.form-item {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		margin: 20px 0 0px 0;
	}

/* 	.form-item select {
		width: 160px;
		background-color: #2169D3;
		border: none;
		border-bottom: 2px solid #000000;
		outline: none;
	} */

	.form-item input {
		border-bottom: 2px solid #000000;
	}

	.btn {
		height: 100px;
	}

	.btn image {
		height: 100px;
		width: 100px;
	}

	/* 登录的下拉框 */
	.typeDownBox {
		position: absolute;
		width: auto;
		height: 70rpx;
		overflow-y: auto;
		background-color: #FFFFFF;
		padding: 5px 15px;
		font-size: 12px;
		top:30px;
		left: 150px;
		border-radius: 5px;
		z-index: 99;
	}
	
	.typeDownBox-item{
		padding: 5px;
		/* border-bottom: 1px solid #FFFFFF; */
	}
</style>
